<script setup lang="ts">
import Card from "./components/Card.vue";
import { queryProduceExamByTask, takePhoto } from "@/api/exam";
import { message } from "@/utils/message";
import { ref, onMounted, computed, watch } from "vue";
import Search from "@iconify-icons/ep/search";

import { FormProps } from "./utils/types";
const props = withDefaults(defineProps<FormProps>(), {
  formInline: () => ({
    id: "",
    creater: "",
    name: "",
    paperid: "",
    paperName: "",
    starttime: "",
    endtime: "",
    del: 0,
    description: "",
    addtime: "",
    updatetime: "",
    userName: ""
  })
});
const newFormInline = ref(props.formInline);

defineOptions({
  name: "RealTimeForm"
});

const svg = `
        <path class="path" d="
          M 30 15
          L 28 17
          M 25.61 25.61
          A 15 15, 0, 0, 1, 15 30
          A 15 15, 0, 1, 1, 27.99 7.5
          L 15 15
        " style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"/>
      `;

const pagination = ref({ current: 1, pageSize: 12, total: 0 });

const dataCacheList = ref([]);

const productList = ref([]);
const dataLoading = ref(true);

const getCardListData = async () => {
  queryProduceExamByTask({
    taskId: newFormInline.value.id
  })
    .then(res => {
      if (res.success) {
        dataCacheList.value = res.data.list;
        //全部
        productList.value = res.data.list;
        pagination.value = {
          ...pagination.value,
          total: res.data.list.length
        };
        dataLoading.value = false;
      } else {
        dataLoading.value = false;
        message("查询数据异常:" + res.errMsg, { type: "error" });
      }
    })
    .catch(error => {
      dataLoading.value = false;
      message("查询数据异常:" + JSON.stringify(error), { type: "error" });
    });
};

onMounted(() => {
  getCardListData();
});

const searchValue = ref("");

const onPageSizeChange = (size: number) => {
  pagination.value.pageSize = size;
  pagination.value.current = 1;
};
const onCurrentChange = (current: number) => {
  pagination.value.current = current;
};

const productListAllSum = computed(() => {
  return dataCacheList.value.length;
});

function productListAll() {
  productList.value = dataCacheList.value;
  pagination.value = {
    ...pagination.value,
    total: dataCacheList.value.length
  };
}

const productListExamSum = computed(() => {
  return dataCacheList.value.filter(item => item.taskZt === 7).length;
});

function productListExam() {
  productList.value = dataCacheList.value.filter(item => item.taskZt === 7);
  pagination.value = {
    ...pagination.value,
    total: productList.value.length
  };
}

const productListSubmiitSum = computed(() => {
  return dataCacheList.value.filter(item => item.taskZt === 6).length;
});

function productListSubmiit() {
  productList.value = dataCacheList.value.filter(item => item.taskZt === 6);
  pagination.value = {
    ...pagination.value,
    total: productList.value.length
  };
}

const productListOtherSum = computed(() => {
  return dataCacheList.value.filter(
    item => item.taskZt !== 6 && item.taskZt !== 7
  ).length;
});

function productListOther() {
  productList.value = dataCacheList.value.filter(
    item => item.taskZt !== 6 && item.taskZt !== 7
  );
  pagination.value = {
    ...pagination.value,
    total: productList.value.length
  };
}
//批量抓拍功能逻辑
const captureIndexRef = ref(0);
const captureCacheList = ref([]);
function batchCapture() {
  if (
    captureIndexRef.value > 0 &&
    captureIndexRef.value == captureCacheList.value.length
  ) {
    //清空
    captureIndexRef.value = 0;
    captureCacheList.value = [];
    return;
  }
  if (captureCacheList.value.length == 0) {
    captureCacheList.value = dataCacheList.value.filter(
      item => item.taskZt === 7
    );
  }
  const { uid } = captureCacheList.value[captureIndexRef.value];
  takePhoto({
    studentId: uid
  })
    .then(_res => {
      captureIndexRef.value++;
      // batchCapture();
      setTimeout(() => {
        batchCapture();
      }, 100);
    })
    .catch(_error => {
      batchCapture();
    });
}

watch(searchValue, newValue => {
  queryProduceExamByTask({
    taskId: newFormInline.value.id,
    name: newValue
  })
    .then(res => {
      if (res.success) {
        dataCacheList.value = res.data.list;
        //全部
        productList.value = res.data.list;
        pagination.value = {
          ...pagination.value,
          total: res.data.list.length
        };
        dataLoading.value = false;
      } else {
        dataLoading.value = false;
        message("查询数据异常:" + res.errMsg, { type: "error" });
      }
    })
    .catch(error => {
      dataLoading.value = false;
      message("查询数据异常:" + JSON.stringify(error), { type: "error" });
    });
});

function refreshAllList() {
  if (searchValue.value.length == 0) {
    getCardListData();
  } else {
    searchValue.value = "";
  }
}
</script>

<template>
  <div class="main">
    <div class="w-full flex justify-between mb-4">
      <div>
        <el-button @click="productListAll">
          全部 ({{ productListAllSum }})
        </el-button>
        <el-button @click="productListExam">
          考试中 ({{ productListExamSum }})
        </el-button>
        <el-button @click="productListSubmiit">
          已交卷 ({{ productListSubmiitSum }})</el-button
        >
        <el-button @click="productListOther">
          其他 ({{ productListOtherSum }})</el-button
        >
        <el-button @click="refreshAllList"> 全量刷新</el-button>
        <el-button @click="batchCapture">
          批量抓拍<span v-if="captureIndexRef > 0">
            (进度{{ captureIndexRef }}/{{ captureCacheList.length }})</span
          ></el-button
        >
      </div>
      <el-input
        style="width: 300px"
        v-model="searchValue"
        placeholder="请输入考生姓名"
        clearable
      >
        <template #suffix>
          <el-icon class="el-input__icon">
            <IconifyIconOffline
              v-show="searchValue.length === 0"
              :icon="Search"
            />
          </el-icon>
        </template>
      </el-input>
    </div>
    <div
      v-loading="dataLoading"
      :element-loading-svg="svg"
      element-loading-svg-view-box="-10, -10, 50, 50"
    >
      <el-empty
        description="暂无数据"
        v-show="
          productList.slice(
            pagination.pageSize * (pagination.current - 1),
            pagination.pageSize * pagination.current
          ).length === 0
        "
      />
      <template v-if="pagination.total > 0">
        <el-row :gutter="16">
          <el-col
            v-for="(product, index) in productList.slice(
              pagination.pageSize * (pagination.current - 1),
              pagination.pageSize * pagination.current
            )"
            :key="index"
            :xs="24"
            :sm="12"
            :md="8"
            :lg="6"
            :xl="4"
          >
            <Card :product="product" />
          </el-col>
        </el-row>
        <el-pagination
          class="float-right"
          v-model:currentPage="pagination.current"
          :page-size="pagination.pageSize"
          :total="pagination.total"
          :page-sizes="[12, 24, 36]"
          :background="true"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="onPageSizeChange"
          @current-change="onCurrentChange"
        />
      </template>
    </div>
  </div>
</template>
